<template>
  <div id="box">
    <headerBar :showBack=false></headerBar>
    <div class="wraper">
      <div>欢迎</div>
      <div class="login_mode">
        <span @click="change_type">{{login_mode.text}}</span>
      </div>
      <div class="cellphone" v-if="login_mode.show">
        <p @click="country_switch">+{{now_country.key}}</p>
        <input type="number" v-model="phone_number" placeholder="手机号">
      </div>
      <div class="mailbox" v-if="!login_mode.show">
        <input type="text" v-model="email_address" placeholder="邮箱">
      </div>
      <ul class="country_code" v-if="show_country_list">
        <li v-for="item in country_code" @click="change_country(item)">
          <span>+{{item.key}}</span>
          <span>{{item.value}}</span>
        </li>
      </ul>
      <div class="password">
        <input type="password" v-model="password" placeholder="密码">
      </div>
      <div class="sign_in" @click="sign_in">登录</div>
      <div class="more">
        <p class="forget" @click="$router.push({path:'/reset'})">忘记密码?</p>
        <p class="register" @click="$router.push({path:'/register'})">注册<img src="../../static/img/zuce.png" alt=""></p>
      </div>
    </div>
  </div>
</template>

<script>

  import headerBar from '@/public/header'

  export default {
    components:{
      headerBar
    },
    data () {
      return {
        login_mode:{
          text:"使用邮箱登录",
          type_code:1,
          show:true
        },
        now_country:{
          key:86,
          value:"中国"
        },
        phone_number:"",
        email_address:"",
        password:"",
        country_code:null,
        show_country_list:false,
      }
    },
    methods:{

      //提示框
      toastNone(msg) {
        this.$dialog.toast({
          mes: msg,
          timeout: 1500
        });
      },

      //更换登录方式
      change_type:function(){
        this.login_mode.show = !this.login_mode.show;
        if(this.login_mode.show === true){
          this.login_mode.type_code = 1;
          this.login_mode.text = "使用邮箱登录"
        } else {
          this.login_mode.type_code = 2;
          this.login_mode.text = "使用手机号登录"
        }
      },

      //显示隐藏国家列表
      country_switch:function () {
        this.show_country_list = !this.show_country_list;
      },

      //更换国家代码
      change_country:function(item){
        this.now_country = item;
        this.show_country_list = false;
      },

      //登录
      sign_in:function () {
        let that = this;
        let login_password = Base64.encode(that.password);
        if(that.login_mode.type_code === 1){

          //手机账号登录
          that.$http.post(domain.webUrl + '/exchange/v1/user/sign/app/in/mobile',{
            login_password:login_password,
            country_code:that.now_country.key,
            mobile:that.phone_number
          }).then(function (data) {
              that.toastNone(data.data.message);
              if(data.data.code === 0){
                localStorage.login_info = JSON.stringify(data.data.data);
                that.$store.commit("add_user");
                setTimeout(function () {
                  that.$router.push({path:'/home'});
//                  that.$router.push({
//                    path: 'sv',
//                    query: {
//                      country_code:that.now_country.key,
//                      mobile:that.phone_number
//                    }
//                  });
                },1000);
              }
              if(data.data.code === 9){
                that.$router.push({
                  path: 'sv',
                  query: {
                    country_code:that.now_country.key,
                    mobile:that.phone_number
                  }
                });
              }
            }).catch(function (error) {
              that.toastNone("手机号+密码->登录"+"出错");
            });
        } else {
          //邮箱登录
          that.$http.post(domain.webUrl + '/exchange/v1/user/sign/app/in/email',{
            login_password:login_password,
            email:that.email_address
          }).then(function (data) {
            that.toastNone(data.data.message);
            if(data.data.code === 0){
              setTimeout(function () {
                that.$router.push({path:'/home'});
              },1000);
            }
          }).catch(function (error) {
            that.toastNone("邮箱+密码->登录"+"出错");
          });
        }
      }

    },
    created: function () {

      let that = this;

      //获取国家代码列表
      this.$http.get(domain.webUrl + '/exchange/v1/user/sign/country')
        .then(function (data) {
          if(data.data.code === 0){
            that.country_code = data.data.data;
          } else{
            alert(data.data.message)
          }
        })
        .catch(function (error) {
          alert("国家代码列表获取"+"出错");
        });
    },
  }
</script>

<style lang="less" scoped>
  @import "../style/var.less";
  #box{
    .full;
    position: fixed;
    z-index: 1;
    background: #ffffff;
    .wraper{
      padding: 0.6rem 1rem;
      .full;
      .relative;
      div{
        &:nth-child(1){
          font-size: 0.58rem;
          color: #636363;
          margin-bottom: 1rem;
        }
      }
      .login_mode{
        text-align: right;
        color:#ff9e01;
        margin-bottom: 0.32rem;
      }
      .cellphone{
        .flex;
        margin-bottom: 0.93rem;
        align-items: center;
        p{
          width: 1.08rem;
          color: #636363;
        }
        input{
          width: 4.3rem;
          border: none;
          font-size: 0.3rem;
          font-weight: 500;
        }
      }
      .mailbox{
        .flex;
        margin-bottom: 0.93rem;
        align-items: center;
        input{
          width: 4.3rem;
          border: none;
          font-size: 0.3rem;
          font-weight: 500;
        }
      }
      .country_code{
        .absolute;
        top: 3.8rem;
        width: 4.5rem;
        height: 5.5rem;
        border: 0.01rem #c1c1c1 solid;
        background: #ffffff;
        padding: 0.2rem 0.1rem 0.1rem 0.3rem;
        overflow: auto;
        li{
          margin-bottom: 0.3rem;
          span:nth-child(1){
            display: inline-block;
            width: 1rem;
          }
        }
      }
      .password{
        margin-bottom: 1.6rem;
        input{
          .full-w;
          border: none;
          font-size: 0.3rem;
          font-weight: 500;
        }
      }
      .sign_in{
        font-size: 0.5rem;
        color:#ff9e01;
      }
      .more{
        .absolute;
        bottom: 1.9rem;
        left: 1rem;
        right: 1rem;
        .flex;
        justify-content: space-between;
        color: #575757;
        .forget{
          font-size: 0.28rem;
        }
        .register{
          font-size: 0.28rem;
          img{
            width: 0.12rem;
            height: 0.2rem;
          }
        }
      }
    }
  }
</style>
